@charset "UTF-8";

/* ---------------------------------------- */
/* スマートBBS用 */
/* ※旧式合わせ版 */


/* バツ印 */
.mark_batu {
	margin: 5% auto;
	padding: 0;
	width: 25%;
	height: 90%;
	display: block;
	background-color: #888888;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	transform: rotate(45deg);
}
.mark_batu:after {
	content: "";
	display: block;

	/* 元と同じ */
	width: 100%;
	height: 100%;
	background-color: inherit;

	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	transform: rotate(90deg);
}
/* 三角ボタン 追加yzk(18.08.08) */
.mark_sankaku {
	margin: 5% auto;
	padding: 0;
	width: 0;
	height: 0;
	display: block;
	border-style: solid;
	border-width: 2px;
	border-color: #ccc;
}
.mark_sankaku.down {
	border-width: 7px 5px 0 5px;
	border-color: #888 transparent transparent transparent;
}
.mark_sankaku.up {
	border-width: 0 5px 7px 5px;
	border-color: transparent transparent #888; 
}

/*-smartBBS外で使う時用追加(18.09.03)-*/
button.mark_b{
	margin: 0 4px;
	padding: 0;
	width: 14px;
	height: 14px;
	vertical-align: text-bottom;
	border: 1px solid #999;
	background-color: #fff;
	cursor: pointer;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.4) inset, 0 1px 3px rgba(0, 0, 0, 0.1);
}
button.mark_b .mark_batu{
	display: block;    
	width: 2px;
    height: 10px;
    background-color: #999;
}
button.mark_b:hover{
    background-color: #ffc155;
    border-color: #cc7722;
}
button.mark_b:hover .mark_batu{
    background-color: #cc7722;
}
button.mark_b .mark_sankaku {
	margin: 5% auto;
	padding: 0;
	width: 0;
	height: 0;
	display: block;
	border-style: solid;
	border-width: 2px;
	border-color: #ccc;
}
button.mark_b .mark_sankaku.down {
	border-width: 7px 5px 0 5px;
	border-color: #888 transparent transparent transparent;
}
button.mark_b:hover .mark_sankaku.down {
	border-color: #cc7722 transparent transparent transparent;
}
button.mark_b .mark_sankaku.up {
	border-width: 0 5px 7px 5px;
	border-color: transparent transparent #888; 
}
button.mark_b:hover .mark_sankaku.up {
	border-color: transparent transparent #cc7722; 
}




/* display:none; */
.none {
	display:none;
}


/* ---------------------------------------- */
/* 通常モード (サイドバー縦長) */


/* ベース */
/* ※ヘッダーフッターを追加 */
#cf_smartbbs {
	margin: 8px auto;
	width: 248px; /* 調整 */
	overflow: hidden;
	border: 1px solid #33aadd;
	text-align: left;
	background-color: #ffffff;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	/* 追加 */
	line-height: 1.3;
	text-rendering: optimizelegibility;
	font-size: 12px;


	/*-yzk171115-*/
	width: 250px;


}
#cf_smartbbs img {
	margin: 0px;
	padding: 0px;
}



/* ヘッダー */
#cf_smartbbs_header {
	margin: 0px;
	padding: 2px;
	height: 28px;
	background-color: #33aadd;
	position: relative;
}
#cf_smartbbs_header p {
	left: 0;
	position: absolute;
	line-height: 20px;
	color: #ffffff;
	font-weight: bolder;
}
/* 開閉ボタン */
#cf_smartbbs_header button {
	margin: 2px;
	margin-top: 2px;/* 調整 */
	height: 20px;
	right: 2px;/* 調整 */
	width: 20px;	/* 追加 */
	height: 20px;
	padding:0;/* 追加 */
	position: absolute;
	background: linear-gradient(#ffffff, #eeeeee) repeat scroll 0 0 rgba(0, 0, 0, 0);
	border: 1px solid #85AF21;
	border-radius: 5px;
	box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.4) inset, 0 1px 3px rgba(0, 0, 0, 0.1);
}
#cf_smartbbs_header button div {
	margin: 0 auto;	/* 調整 */
	width: 0;
	height: 0;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	border-top: 10px solid #85bb21;
	border-bottom: none;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
}
#cf_smartbbs_header button.close div {
	margin: 0 auto;	/* 調整 */
	border-top: none;
	border-bottom: 10px solid #85bb21;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
}
#cf_smartbbs_header button:hover {
	background: linear-gradient(#ffc155, #e0b040) repeat scroll 0 0 rgba(0, 0, 0, 0);
	border: 1px solid #cc9933;
}
#cf_smartbbs_header button:hover div {
	border-top: 10px solid #ffffff;
	border-bottom: none;
}
#cf_smartbbs_header button.close:hover div {
	border-top: none;
	border-bottom: 10px solid #ffffff;
}
/* 新着アイコン */
#cf_smartbbs_header img.new {
	margin: 4px 2px;
	width:18px;
	height:16px;
	background-size:auto;
	vertical-align: middle;
	-webkit-animation-name: ani_blink;
	-webkit-animation-duration: 1s;
	-webkit-animation-iteration-count: 3;
	-webkit-animation-direction: normal;
	-moz-animation-name: ani_blink;
	-moz-animation-duration: 1s;
	-moz-animation-iteration-count: 3;
	-moz-animation-direction: normal;
	animation-name: ani_blink;
	animation-duration: 1s;
	animation-iteration-count: 3;
	animation-direction: normal;
}
@-webkit-keyframes ani_blink {
	0% {opacity:1;}
	50% {opacity:0.4;}
	100% {opacity:1;}
}
@-moz-keyframes ani_blink {
	0% {opacity:1;}
	50% {opacity:0.4;}
	100% {opacity:1;}
}
@keyframes ani_blink {
	0% {opacity:1;}
	50% {opacity:0.4;}
	100% {opacity:1;}
}
/* ※Twitter新着アイコン例外 */
img#cf_smartbbs_new_twitter {
	background-color: #ffffff;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}



/* モードボタン */
#cf_smartbbs ul.modebutton {
	margin: 4px auto;
	width: 96%;
	list-style-type : none;
	text-align: center;
}
#cf_smartbbs ul.modebutton li {
	margin: 3px 2px;	/* 調整 */
	display: inline-block;
}
#cf_smartbbs ul.modebutton li.hidden {
	display: none;
}
#cf_smartbbs ul.modebutton li a {
	width: 50px;
	height: 50px;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	background-position: 0px 0px;
	-webkit-background-size: 100% auto !important;
	-moz-background-size: 100% auto !important;
	background-size: 100% auto !important;
	display: block;
}

#cf_smartbbs ul.modebutton li#cf_smartbbs_m0 a {
	background: url("../img/smartBBS/BBS_inbox.png") no-repeat scroll 0px 0px transparent;
}
#cf_smartbbs ul.modebutton li#cf_smartbbs_m1 a {
	background: url("../img/smartBBS/BBS_sent.png") no-repeat scroll 0px 0px transparent;
}
#cf_smartbbs ul.modebutton li#cf_smartbbs_m2 a {
	background: url("../img/smartBBS/BBS_chat.png") no-repeat scroll 0px 0px transparent;
}
#cf_smartbbs ul.modebutton li#cf_smartbbs_m3 a {
	background: url("../img/smartBBS/BBS_public.png") no-repeat scroll 0px 0px transparent;
}
#cf_smartbbs ul.modebutton li#cf_smartbbs_m4 a {
	background: url("../img/smartBBS/BBS_private.png") no-repeat scroll 0px 0px transparent;
}
#cf_smartbbs ul.modebutton li#cf_smartbbs_m5 a.old {
	background: url("../img/smartBBS/BBS_twitter.png") no-repeat scroll 0px 0px transparent;
}
#cf_smartbbs ul.modebutton li#cf_smartbbs_m6 a {
	background: url("../img/smartBBS/BBS_tv.png") no-repeat scroll 0px 0px transparent;
}
#cf_smartbbs ul.modebutton li#cf_smartbbs_m7 a {
	background: url("../img/smartBBS/BBS_blog.png") no-repeat scroll 0px 0px transparent;
}
#cf_smartbbs ul.modebutton li.selected a {
	background-position: 0px 50% !important;
}
#cf_smartbbs ul.modebutton li a:hover {
	background-position: 0px 100% !important;
}


/* フォーム */
#cf_smartbbs_form {
	display: block;
}
#cf_smartbbs div.readonly #cf_smartbbs_form {
	display: none;
}


#cf_smartbbs_form .userinfo {
	margin: 4px auto;
	width: 96%;
	/*
	display: -webkit-box;
	display: -moz-box;
	display: box;
	-webkit-box-align:end;
	-moz-box-align:end;
	box-align:end;
	*/
}
#cf_smartbbs_form img.icon {
	width: 50px;
	height: 50px;
	vertical-align: bottom;
	display: inline-block;
}
#cf_smartbbs_form .userinfo p {
	width: -webkit-calc(95% - 55px); /* -はスペース必要 *//* 調整 */
	width: -moz-calc(95% - 55px);
	width: calc(95% - 55px);
	display: inline-block;
}

#cf_smartbbs_form .sendinfo {
	text-align: right;
}
#cf_smartbbs_form .sendinfo p {
	margin: 4px auto;
	padding: 4px;
	width: 92%;
	text-align: center;
	border: 1px solid #33aadd;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}
#cf_smartbbs_form .sendinfo select {
	margin: 4px auto;
	width: 96%;
	display: block;
	border: 1px solid #33aadd;
}

#cf_smartbbs_form .sendinfo textarea {
	margin: 4px auto;
	padding: 1px;
	width: 94%;
	min-height: 20px;
	border: 1px solid #33aadd;
	resize: none;
	font-size: 14px;
	/*
	transition-property: height;
	transition-delay: 0;
	transition-duration: 0.2s;
	transition-timing-function: ease-in-out ;
	*/
	height: 20px;
	display: block;
}
#cf_smartbbs_form .sendinfo textarea.active {
	resize: vertical;
	/*
	transition-property: height;
	transition-delay: 0;
	transition-duration: 0.2s;
	transition-timing-function: ease-in-out ;
	*/
	min-height: 20px;
	height: 120px;
}

#cf_smartbbs_form .sendinfo .warning {
	margin: 0px 8px;
	display: block;
	text-align: left;
	color: #ff4466;
}

/* ログ用ボタン追加 *//*- not(.mini_b2)追加yzk(18.08.08) -*/
#cf_smartbbs_log button:not(.mini_b2) , 
#cf_smartbbs_form .sendinfo button:not(.mini_b2) {
	margin: 4px 0;
	margin-right: 4px;
	padding: 2px 8px;
	color: #19335f;
	background: linear-gradient(#ffffff, #eeeeee) repeat scroll 0 0 rgba(0, 0, 0, 0);
	border: 1px solid #33aadd;
	border-radius: 5px;
	box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.4) inset, 0 1px 3px rgba(0, 0, 0, 0.1);
}
#cf_smartbbs_log button:not(.mini_b2):hover, 
#cf_smartbbs_form .sendinfo button:not(.mini_b2):hover {
	background: linear-gradient(#ffc155, #e0b040) repeat scroll 0 0 rgba(0, 0, 0, 0);
	border: 1px solid #cc9933;
	color: #ffffff;
}
#cf_smartbbs_log button:not(.mini_b2).b_gray, 
#cf_smartbbs_log button:not(.mini_b2):hover.b_gray, 
#cf_smartbbs_form .sendinfo button:not(.mini_b2).b_gray ,
#cf_smartbbs_form .sendinfo button:not(.mini_b2):hover.b_gray {
	background: linear-gradient(#cccccc, #cccccc) repeat scroll 0 0 rgba(0, 0, 0, 0);
	border: 1px solid #888888;
	cursor: default;
	color: #666666;
}
#cf_smartbbs_log .user_bottom{
    width: auto;
    display: inline-block;
    float: none;
    border-radius: 0 0 6px 6px;
    padding: 6px;
    margin: 2px 0 0;	
}
#cf_smartbbs_log .user_bottom .mini_b2{
	width: 100%;
}


/* フォーム例外 */
#cf_smartbbs_public ,
#cf_smartbbs_private ,
#cf_smartbbs_Twitter0 {
	text-align: center;
}

/* ログ */
#cf_smartbbs_tv, 
#cf_smartbbs_log {
	margin-top: 4px;
	height: 300px;
	min-height: 300px;
	resize: vertical;
	display: block;
	list-style-type : none;
	overflow:auto;
	border-top: 1px solid #33aadd;
	background-color:#fff;
}
#cf_smartbbs div.readonly #cf_smartbbs_blog, 
#cf_smartbbs div.readonly #cf_smartbbs_tv, 
#cf_smartbbs div.readonly #cf_smartbbs_log {
	height: 400px;
	min-height: 400px;
}

.top_area #cf_smartbbs div.readonly #cf_smartbbs_blog, 
.top_area #cf_smartbbs div.readonly #cf_smartbbs_tv, 
.top_area #cf_smartbbs div.readonly #cf_smartbbs_log {
	min-height: auto;
}
#cf_smartbbs div.readonly #cf_smartbbs_blog {
	border-top: 1px solid #33aadd;
}
#cf_smartbbs_log li {
	margin: 3px;
	padding: 2px;
	background-position: right top;
    background-repeat: no-repeat;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	/*-追加_yzk-*/
	-webkit-background-size:18px 16px;
	-moz-background-size:18px 16px;
	background-size:18px 16px;
	border-color:#c3c3c3;
	border-left-color:#ddd;
	border-style:solid;
	border-width:4px 1px 1px 1px;
}
/* ログ背景色 */
#cf_smartbbs_log li.chat {
	background-image: url("../img/smartBBS/BBS_chat_icon.png");
	background-color:#f2fbfe;
	border-top-color:#a8e4fb;
}
#cf_smartbbs_log li.inbox {
	background-image: url("../img/smartBBS/BBS_inbox_icon.png");
	background-color:#fefafe;
	border-top-color:#f8bdea;
}
#cf_smartbbs_log li.official {
	background-image: url("../img/smartBBS/BBS_official_icon.png");
	background-color:#f6fcfa;
	border-top-color:#96dea6;
	-webkit-background-size:40px 16px;
	-moz-background-size:40px 16px;
	background-size:40px 16px;
}
#cf_smartbbs_log li.private {
	background-image: url("../img/smartBBS/BBS_private_icon.png");
	background-color:#fefcff;
	border-top-color:#e2b4ff;
}
#cf_smartbbs_log li.public {
	background-image: url("../img/smartBBS/BBS_public_icon.png");
	background-color:#fff8ef;
	border-top-color:#ffcf99;
}
#cf_smartbbs_log li.sent {
	background-image: url("../img/smartBBS/BBS_sent_icon.png");
	background-color:#fbfdf8;
	border-top-color:#bde995;
}
#cf_smartbbs_log li.twitter.old {
	background-image: url("../img/smartBBS/BBS_twitter_icon.png");
	background-color:#f2fbff;
	border-top-color:#a4c9ff;
}
#cf_smartbbs_log p {
	word-wrap: break-word;
	word-break: break-all;/*-170404追加-*/
}
#cf_smartbbs_log p a {
	color: #802070;	/* 追加 */	
    word-break:break-word;/*-160527追加-*/
	word-break: break-all;/*-170404追加-*/
}
#cf_smartbbs_log p[class^="align_"]{/*-180820追加-*/
	padding:4px;
}
#cf_smartbbs_log p[class^="align_"] button{/*-180820追加-*/
    margin: 2px;
    font-size: 12px;
	padding: 1px 4px;
}

/* アイコン */
#cf_smartbbs_log p.userinfo a {/*-160527追加-*/
    width:calc(100% - 45px);
    display: inline-block;
}

/* アイコン */
#cf_smartbbs_log p.userinfo img {
	margin: 0 2px 0 0;
	padding: 0;
	width: 25px;
	height: 25px;
	vertical-align: top;
}
/* 画像 */
#cf_smartbbs_log p.photo {
	display: block;
	text-align: center;
}
#cf_smartbbs_log p.photo a {
	cursor: pointer;
}
#cf_smartbbs_log p.photo img {
	margin: 4px auto;
	/*- max-width: 196px; -*//*-160527修正-*/
	max-width: 130px;
	max-height: 140px;
	width: auto;
	height: auto;
	vertical-align: bottom;
}

/*-受信送信アイコン-*/
.from:before,
.sendto:before {
  content: "";
  display: inline-block;
  width: 25px;
  height: 25px;
  -moz-background-size: 100% 100%;
  -o-background-size: 100% 100%;
  -webkit-background-size: 100% 100%;
  background-size: 100% 100%;
}

/*-受信アイコン-*/
.sendto:before {
  background-image: url(../img/icon_sendto.png);
}

/*- 送信アイコン-*/
.from:before {
  background-image: url(../img/icon_from.png);
}

/* 日時 */
#cf_smartbbs_log p.date {
	color: #888888;
	text-align: right;
}
#cf_smartbbs_log p.date a {
	display: block;
}
#cf_smartbbs_log p.date button {
	margin: 0 4px;
	padding: 0;
	width: 14px;
	height: 14px;
	vertical-align: bottom;
	border: 1px solid #888888;
	background-color: #ffffff;
	cursor: pointer;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.4) inset, 0 1px 3px rgba(0, 0, 0, 0.1);
}
#cf_smartbbs_log p.date button:hover {
	border-color: #cc7722;
}
#cf_smartbbs_log p.date button .mark_batu {
	width: 2px;
	height: 10px;
}
#cf_smartbbs_log p.date button:hover .mark_batu {
	background-color: #cc7722;
}
/* 追加yzk(18.08.08) */
#cf_smartbbs_log p.date button:hover .mark_sankaku.down {
	border-color: #cc7722 transparent transparent transparent;
}
#cf_smartbbs_log p.date button:hover .mark_sankaku.up {
	border-color: transparent transparent #cc7722; 
}


/* ブログ */
#cf_smartbbs_blog {
	height: 300px;
	min-height: 300px;
	resize: vertical;
	display: block;
	overflow: hidden;
}
#cf_smartbbs_blog iframe {
	width: 100%;
	height: 100%;
}

/* TV */
#cf_smartbbs_tv li {
	margin: 3px;
	padding: 4px;
	border-color:#c3c3c3;
	border-left-color:#ddd;
	border-style:solid;
	border-width:4px 1px 1px 1px;
	background-color:#f8fbfd;
	border-top-color:#bd95e9;
	word-wrap: break-word;
}
#cf_smartbbs_tv li.col1 {
	background-color:#fdf8fb;
	border-top-color:#95bde9;
}
#cf_smartbbs_tv li.col2 {
	background-color:#fbfdf8;
	border-top-color:#bde995;
}
#cf_smartbbs_tv li.col3 {
	background-color:#fdfbf8;
	border-top-color:#e9bd95;
}
#cf_smartbbs_tv li.col4 {
	background-color:#fcf8f8;
	border-top-color:#f09595;
}
#cf_smartbbs_tv li.title {
	border-width:2px 2px 2px 2px;
	background-color:#ffffff;
	border-top-color:#bbbbbb;
}
#cf_smartbbs_tv li a {
	display: block;
	color: #802070;
}


/* ---------------------------------------- */
/* twitter -> x 調整 2023.08.22 */

#cf_smartbbs ul.modebutton li#cf_smartbbs_m5 a {
	background: url("../img/smartBBS/BBS_twitter_x.png") no-repeat scroll 0px 0px transparent;
}
#cf_smartbbs_log li.twitter {
	background-image: url("../img/smartBBS/BBS_twitter_x_icon.png");
	background-color:#f2fbff;
	border-top-color:#a4c9ff;
}




/* ---------------------------------------- */
/* 縮小モード (メイン画面上段横長) */
/* ※旧式では使用しない */